<template>
	<!-- 客服弹窗页面 -->
	<view>
		<u-popup :show="show" mode="bottom" :round="40" :closeOnClickOverlay="true" @close="close">
			<view class="kf-service">
				<view class="kf-service-header">
					<text>添加方天下小管家</text>
				</view>
				
				<view class="kf-service-content">
					<view class="kf-service-rights-wrap">
						<view class="kf-service-rights-item">
							<u-icon label="1对1专属服务" size="40" label-color="#000" color="#18b566" name="server-man"></u-icon>
						</view>
						<view class="kf-service-rights-item">
							<u-icon label="全程管家式服务" size="40" label-color="#000" color="#18b566" name="heart-fill"></u-icon>
						</view>
						<view class="kf-service-rights-item">
							<u-icon label="推荐优质路线" size="40" label-color="#000" color="#18b566" name="thumb-up-fill"></u-icon>
						</view>
						<view class="kf-service-rights-item">
							<u-icon label="优质活动不错过" size="40" label-color="#000" color="#18b566" name="volume-fill"></u-icon>
						</view>
					</view>
					
					<view class="kf-service-qr-wrap">
						<view class="image-wrap">
							<image class="kf-service-qr" :src="kfQrcode" :show-menu-by-longpress="true" mode="aspectFit"></image>
						</view>
						<text class="kf-service-tips">长按识别二维码添加</text>
					</view>
				</view>
				
				<view style="height: 100rpx;width: 100%;"></view>
				<view class="kf-service-footer" @click="callPhone">
					<u-text align="center" prefixIcon="phone-fill" iconStyle="font-size:50rpx;margin-right:10rpx;color: #18b566" :size="38" text="电话咨询"></u-text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { kfService } from '@/api/api.js'
	export default {
		name:"ftx-kfservice",
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				kfQrcode: '',
				kfPhone: '',
			};
		},
		methods: {
			close: function() {
				this.$emit("change",{action:'closeKf',value:true})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.kfPhone
				})
			}
		},
		mounted() {
			kfService().then(res => {
				this.kfQrcode = res.data.kfQrcode
				this.kfPhone = res.data.kfPhone || ''
			})
		}
	}
</script>

<style lang="scss" scoped>
	.kf-service {
		.kf-service-header {
			background-color: rgba(100,250,90,0.2);
			padding: 20rpx 0;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
		}
		.kf-service-content {
			@include flex;
			flex-direction: column;
			justify-content: space-between;
			.kf-service-rights-wrap {
				padding: 20rpx 30rpx;
				@include flex;
				flex-wrap: wrap;
				.kf-service-rights-item {
					width: 50%;
					margin-bottom: 20rpx;
					@include flex;
					justify-content: center;
				}
			}
			.kf-service-qr-wrap {
				@include flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				.image-wrap {
					background-color: #ecf5ff;
					border-radius: 10rpx;
					width: 300rpx;
					height: 300rpx;
					@include flex;
					justify-content: center;
					align-items: center;
					.kf-service-qr {
						width: 280rpx;
					}
				}
				.kf-service-tips {
					font-size: 26rpx;
					padding: 10rpx 40rpx;
					text-align: center;
					background-color: #ecf5ff;
					border-radius: 12rpx;
					margin: 20rpx 0;
				}
			}
		}
		.kf-service-footer {
			height: 90rpx;
			line-height: 90rpx;;
			background-color: #f2efef;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}
	}
</style>